<template>

  <div class="panel">
    <el-form v-loading="!detailData.dataReady" :model="detailData.detail" class="demo-form-inline" label-width="100px">

      <el-form-item label="主体" class="content-main">
        <div class="imgBg" style="margin-right:12px;" v-for="(url,index) in detailData.detail.images" :key="index" @click="detailFn.openImageViewer(detailData.detail.images,index)">
          <el-image fit="contain" style="width: 120px; height: 120px;" :src="url" />
        </div>
      </el-form-item>

      <el-form-item label="备注">{{detailData.detail.remark}}</el-form-item>

      <el-form-item label="适用版本">
        <template v-for="(itemId,index) in detailData.detail.versions||[]" :key="index" >
          <el-tag style="margin-right:12px;">
            {{detailData.versionMap.get(itemId)?.osType}}
            {{detailData.versionMap.get(itemId)?.version}}
          </el-tag>
        </template>
        <span v-if="!detailData.detail.versions?.length" class="isEmpty">无</span>
      </el-form-item>

      <el-form-item style="text-align:center">
        <template v-if="detailData.dataReady && hasPermission(['material:guide'])">
          <el-button v-if="detailData.detail.status!==1" type="primary" plain @click="detailFn.goToEditPage(detailData.detail.id)">编辑</el-button>
          <el-button type="danger" plain @click="deleteFn.sureDelete(detailData.detail.id)">删除</el-button>
        </template>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
export default {
  name: "guideDetail",
};
</script>
<script setup>
import { reactive, ref, watchEffect } from "vue";
import { getGuideDetail, deleteGuide } from "@/api/material.js";
import { getVersionStatusList } from "@/api/config.js";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
// import imageViewer from "@/components/imageViewer";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "@/store";
import imageViewer from "@/components/imageViewer/index2";

const store = useStore();
const router = useRouter();
const params = ref({});
const query = ref({});
watchEffect(()=>{
  console.log("router params:",router.currentRoute.value.params)
  params.value = router.currentRoute.value.params;
})
watchEffect(()=>{
  query.value = router.currentRoute.value.query;
})


// 详情
const { $data: detailData, $fn: detailFn } = (() => {
  const backup = {
    query: {
      endpoint: "pico",
      page: 1,
      pageSize: 1000,
    },
  };
  const $data = reactive({
    detail: {},
    dataReady: false, //数据是否已拿到
    versionMap: new Map(),
  });
  const $fn = {
    getDetails() {
      console.log("guide detail:",params.value.id)
      if (!params.value.id) return;
      $data.dataReady = false;
      getGuideDetail(params.value.id).then((res) => {
        if (res.code === 0) {
          $data.dataReady = true;
          $data.detail = { ...res.data };
        }
      });
    },
    getVersions() {
      getVersionStatusList().then((res) => {
        console.log("version list:", res);
        if (res.code === 0) {
          for(let prop of res.data || []){
            $data.versionMap.set(prop.osType+'-'+prop.version,prop);
          }
        }
      });
    },
    openImageViewer(list, index) {
      imageViewer({initialIndex: index,urlList: list});
    },
    goToEditPage(id) {
      router.push(`/material/guideList/operate/${id}`);
    }
  };
  $fn.getVersions();
  return {
    $data,
    $fn,
  };
})();

// 删除
const { $fn: deleteFn } = (() => {
  const $fn = {
    sureDelete(id) {
      ElMessageBox.confirm("是否删除该引导页？", "提示", {
        type: "error",
      }).then(() => {
        deleteGuide(id).then(() => {
          if(res.code===0){
            ElMessage.success("操作成功");
            store
              .dispatch("tagsView/delView", { ...router.currentRoute.value })
              .then(() => {
                router.replace({ path: "/material/guideList" });
              });
          }
        });
      });
    },
  };
  return {
    $fn,
  };
})();

function init(){
  detailFn.getDetails();
}
init();

// 从相同路由进入（不同参数），如/a/b/1 => /a/b/2
onBeforeRouteUpdate((to, from, next) => {
  params.value.id = to.params.id;
  init();
  next();
});

</script>

<style scoped lang="scss">
.panel {
  background-color: #ffffff;
  padding: 12px;
  border-radius: 8px;
}
.isEmpty {
  color: rgb(172, 172, 172);
}
.content-main {
  .blockBg {
    display: inline-block;
    vertical-align: top;
  }
  .imgBg {
    display: inline-block;
  }
}
</style>